@include b('bi-week-range') {
  width: 100%;
  height: 100%;
  cursor: pointer;

  .el-date-editor {
    width: 0;
    height: 0;
    cursor: pointer;
  }
  @include e('cell-item') {
    box-sizing: border-box;
    height: 30px;
    padding: getCssVar(spacing, super-tight) 0;
    @include m('text') {
      position: absolute;
      left: 50%;
      display: block;
      width: 24px;
      height: 24px;
      margin: 0 auto;
      line-height: 24px;
      border-radius: 50%;
      transform: translateX(-50%);
      @include when('today') {
        color: getCssVar(color, primary);
      }
    }
    @include when('started') {
      width: 100%;
      margin-left: 5px;
      color: getCssVar(color, primary, text);
      background: getCssVar(color, primary);
      .#{bem('bi-week-range','cell-item','text')} {
        color: getCssVar(color, primary, text);
        background: getCssVar(color, primary);
      }
      @include when('monday') {
        border-top-left-radius: getCssVar(border-radius, small);
        border-bottom-left-radius: getCssVar(border-radius, small);
      }

      @include when('left'){
        border-top-left-radius: getCssVar(border-radius, small);
        border-bottom-left-radius: getCssVar(border-radius, small);
      }
      @include when('sunday') {
        position: relative;
        z-index: 10;
        border-top-right-radius: getCssVar(border-radius, small);
        border-bottom-right-radius: getCssVar(border-radius, small);
      }

      @include when('right'){
        border-top-right-radius: getCssVar(border-radius, small);
        border-bottom-right-radius: getCssVar(border-radius, small);
      }

    }
    @include when('ended') {
      z-index: 10;
      width: 100%;
      margin-right: getCssVar(spacing, extra-tight);
      color: getCssVar(color, primary, text);
      background: getCssVar(color, primary);
      .#{bem('bi-week-range','cell-item','text')} {
        color: getCssVar(color, primary, text);
        background: getCssVar(color, primary);
      }
      @include when('monday') {
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
      }
      @include when('left'){
        border-top-left-radius: getCssVar(border-radius, small);
        border-bottom-left-radius: getCssVar(border-radius, small);
      }
      @include when('sunday') {
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
      }
      @include when('right'){
        border-top-right-radius: getCssVar(border-radius, small);
        border-bottom-right-radius: getCssVar(border-radius, small);
      }

    }
    @include when('inrange') {
      color: getCssVar(color, text, 0);
      background: getCssVar(color, secondary, light-default);
      @include when('hover'){
        background: getCssVar(color, secondary, light-default);
      }
    }
    @include when('hover'){
      color:getCssVar(color, primary);
      background: transparent;
    }
    @include when('inhoverrange') {
      color: getCssVar(color, text, 0);
      background: getCssVar(color, secondary, light-default);
      @include when('hover'){
        color: getCssVar(color, primary, text);
        background: getCssVar(color, primary);
      }
      @include when('left'){
        border-top-left-radius: getCssVar(border-radius, small);
        border-bottom-left-radius: getCssVar(border-radius, small);
      }
      @include when('right'){
        border-top-right-radius: getCssVar(border-radius, small);
        border-bottom-right-radius: getCssVar(border-radius, small);
      }
    }

  }
}
@include b('bi-week-range-picker-pop') {
  .el-date-table tr {
    &:hover{
      background-color: unset!important;
    }
  }

  &.el-picker__popper {
    .el-date-table__row {
      .is-started {
        padding-left: 5px;
        margin-left: 0;
      }
    }
  }
}
